<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>
<?php if(!empty($data['data2'])){?>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" id="table" class="martop5 tbl-list">
        <tr>
            <th class="td-label bold text-center" width="50px">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Stt</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Tên nhóm</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Total Click</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">Real click</p>
            </th>
           
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">View</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">CTR (%)</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">% Click</p>
            </th>
             <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">% View</p>
            </th>
            <th class="td-label bold text-center">
                <p style="height:33px;line-height: 33px;" class="ver-middle">% Real</p>
            </th>
          </tr>
        <?php  foreach($data['data2'] as $k=>$v){?>
          <tr>
            <td class="ver-middle">
                <p class="pad5 text-center"><?php echo($k+1);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center"><a href="<?php echo site_url('report/groupreport?id='.$v['groupid'].'&fromdate='.date('Y-m-d',strtotime($fromdate)).'&todate='.date('Y-m-d',strtotime($todate)));?>"><?php echo $v['groupname'];?></a></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo $v['click'];?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo $v['realclick'];?></p>
            </td>
            
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo $v['view'];?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo $v['ctr'];?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo ($sumView==0)?0:round(100*$v['realclick']/$sumRealclick,3);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo ($sumView==0)?0:round(100*$v['view']/$sumView,3);?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"><?php echo ($v['click']==0)?0:round(100*$v['realclick']/$v['click'],3);?></p>
            </td>
          </tr>
          <?php }?>
          <tr>
            <td colspan="2" class="ver-middle">
              <p class="pad5 text-center price" style="font-weight:bold">Tổng số</p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"  style="font-weight:bold"><?php echo $sumClick;?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"  style="font-weight:bold"><?php echo $sumRealclick;?></p>
            </td>
          
            <td class="ver-middle">
                <p class="pad5 text-center price"  style="font-weight:bold"><?php echo $sumView;?></p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"  style="font-weight:bold">
                    <?php 
                        echo ($sumView==0)?0:round(100*$sumRealclick/$sumView,3) ;
                    ?>
                </p>
            </td>
            <td class="ver-middle">
                <p class="pad5 text-center price"  style="font-weight:bold">
                   100%
                </p>
            </td>
            <td class="ver-middle">
               <p class="pad5 text-center price"  style="font-weight:bold">
                   100%
                </p>
            </td>
            <td class="ver-middle">
              	 <p class="pad5 text-center price"  style="font-weight:bold">
                    <?php 
                        echo ($sumClick==0)?0:round(100*$sumRealclick/$sumClick,3) ;
                    ?>
                </p>
            </td>
          </tr>
    </table>
<?php }?>
<div style="clear:both; height:10px;"><span></span></div>
<div id="RealClick" class="chart"></div>
<div style="clear:both; height:10px;"><span></span></div>
<div id="View" class="chart"></div>
<script type="text/javascript">
	var addCommasNumber=function addCommas(nStr)
	{
		nStr += '';
		x = nStr.split('.');
		x1 = x[0];
		x2 = x.length > 1 ? '.' + x[1] : '';
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(x1)) {
			x1 = x1.replace(rgx, '$1' + ',' + '$2');
		}
		return x1 + x2;
	}
	var chart1,chart2,chart3,chart4,chart5;
	
	$(document).ready(function() {
	   <?php if($active_unactive!=''){ ?>
	   chart1 = new Highcharts.Chart({
		  chart: {
			 renderTo: 'Active_Unactive',
			 plotBackgroundColor: null,
			 plotBorderWidth: null,
			 plotShadow: true
		  },
		  title: {
			 text: 'Tỷ lệ người dùng kích hoạt và chưa kích hoạt'
		  },
		  tooltip: {
			 formatter: function() {
				return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' người, Chiếm:'+ this.y +' %';
			 }
		  },
		  plotOptions: {
			 pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
				   enabled: true,
				   color: Highcharts.theme.textColor || '#000000',
				   connectorColor: Highcharts.theme.textColor || '#000000',
				   formatter: function() {
					  return '<b>'+ this.point.name +'</b>  '+ addCommasNumber(this.point.vote)+' người, - Chiếm '+ this.y +' %';
				   }
				},
				showInLegend: true
			 }
		  },
		   series: [{
			 type: 'pie',
			 name: '',
			 data: [
				<?php echo $active_unactive;?>
			 ]
		  }],
		  exporting: {
			enabled: false
		  }
	   });
	   <?php }else{?>
	   		$('#Active_Unactive').html('Chưa có dữ liệu trả về');
	   <?php }?>
	   <?php if($active_monney!=''){ ?>
	  //chart 2
	    chart2 = new Highcharts.Chart({
		  chart: {
			 renderTo: 'Active_Money',
			 plotBackgroundColor: null,
			 plotBorderWidth: null,
			 plotShadow: true
		  },
		  title: {
			 text: 'Tỷ lệ người dùng nạp tiền/ người dùng kích hoạt'
		  },
		  tooltip: {
			 formatter: function() {
				return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' người, Chiếm:'+ this.y +' %';
			 }
		  },
		  plotOptions: {
			 pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
				   enabled: true,
				   color: Highcharts.theme.textColor || '#000000',
				   connectorColor: Highcharts.theme.textColor || '#000000',
				   formatter: function() {
					  return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' người, Chiếm:'+ this.y +' %';
				   }
				},
				showInLegend: true
			 }
		  },
		   series: [{
			 type: 'pie',
			 name: '',
			 data: [
			 		<?php echo $active_monney;?>
			 ]
		  }],
		  exporting: {
			enabled: false
		  }
	   });
	   <?php }else{?>
	  		$('#Active_Money').html('Chưa có dữ liệu trả về');
	   <?php }?>
	    <?php if($spent_monney!=''){ ?>
	   //chart 3
	    chart3 = new Highcharts.Chart({
		  chart: {
			 renderTo: 'Spent_Money',
			 plotBackgroundColor: null,
			 plotBorderWidth: null,
			 plotShadow: true
		  },
		  title: {
			 text: 'Tỷ lệ người tiêu tiền/ người nạp tiền'
		  },
		  tooltip: {
			 formatter: function() {
				return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' người, - Chiếm '+ this.y +' %';
			 }
		  },
		  plotOptions: {
			 pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
				   enabled: true,
				   color: Highcharts.theme.textColor || '#000000',
				   connectorColor: Highcharts.theme.textColor || '#000000',
				   formatter: function() {
					  return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' người, - Chiếm '+ this.y +' %';
				   }
				},
				showInLegend: true
			 }
		  },
		   series: [{
			 type: 'pie',
			 name: '',
			 data: [
			 		<?php echo $spent_monney;?>
			 ]
		  }],
		  exporting: {
			enabled: false
		  }
	   });
	   <?php }else{?>
	   		$('#Spent_Money').html('Chưa có dữ liệu trả về');
	   <?php }?>
	   <?php if($click!=''){ ?>
	   //chart 4
	    chart4 = new Highcharts.Chart({
		  chart: {
			 renderTo: 'RealClick',
			 plotBackgroundColor: null,
			 plotBorderWidth: null,
			 plotShadow: true
		  },
		  title: {
			text: 'Thống kê lượng Click từ <?php echo $fromdate ?> đến <?php echo $todate ?>'
		  },
		  tooltip: {
			 formatter: function() {
				return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' - Chiếm '+ this.y +' %';
			 }
		  },
		  plotOptions: {
			 pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
				   enabled: true,
				   color: Highcharts.theme.textColor || '#000000',
				   connectorColor: Highcharts.theme.textColor || '#000000',
				   formatter: function() {
					  return  this.y +' %';
				   }
				},
				showInLegend: true
			 }
		  },
		   series: [{
			 type: 'pie',
			 name: '',
			 data: [
			 		<?php echo $click;?>
			 ]
		  }],
		  exporting: {
			enabled: false
		  }
	   });
	   <?php }else{?>
	  	 $('#RealClick').html('Chưa có dữ liệu trả về');
	   <?php }?>
	   <?php if($view!=''){ ?>
	   //chart 5
	    chart5 = new Highcharts.Chart({
		  chart: {
			 renderTo: 'View',
			 plotBackgroundColor: null,
			 plotBorderWidth: null,
			 plotShadow: true
		  },
		  title: {
			 text: 'Thống kê lượng View từ <?php echo $fromdate ?> đến <?php echo $todate ?>'
		  },
		  tooltip: {
			 formatter: function() {
				return '<b>'+ this.point.name +'</b>:  '+ addCommasNumber(this.point.vote)+' - Chiếm '+ this.y +' %';
			 }
		  },
		  plotOptions: {
			 pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
				   enabled: true,
				   color: Highcharts.theme.textColor || '#000000',
				   connectorColor: Highcharts.theme.textColor || '#000000',
				   formatter: function() {
					  return this.y +' %';
				   }
				},
				showInLegend: true
			 }
		  },
		   series: [{
			 type: 'pie',
			 name: '',
			 data: [
			 		<?php echo $view;?>
			 ]
		  }],
		  exporting: {
			enabled: false
		  }
	   });
	   <?php }else{?>
	   		$('#View').html('Chưa có dữ liệu trả về');
	   <?php }?>
	  $('.sumaryItem').find('span').each(function(){
	  	$(this).html(addCommasNumber($(this).html()));
	  });
	  $('.price').each(function(){
	  	$(this).html(addCommasNumber($(this).html()));
	  });
	});
</script>

